<template>
  <div class="app-container">
    <div class="head-container">
      <!-- <treeselect class="filter-item treeselect-main" v-model="query.typeId"  :options="courseType" :style="style" placeholder="选择课程分类"/>
      <el-select class="filter-item" v-model="query.teacherId" clearable filterable placeholder="请选择课程讲师">
        <el-option
          v-for="item in teacherList"
          :key="item.id"
          :label="item.label"
          :value="item.id">
        </el-option>
      </el-select> -->
      <!-- <el-select class="filter-item" v-model="query.planId" clearable filterable placeholder="请选择关联培训计划">
        <el-option
          v-for="item in planList"
          :key="item.id"
          :label="item.trainName"
          :value="item.id">
        </el-option>
      </el-select> -->
      <el-input v-model="query.courseName" clearable placeholder="输入课程名称搜索" maxlength="10" style="width: 200px;"
                class="filter-item" @keyup.enter.native="init"/>
      <el-input v-model="query.source" clearable placeholder="输入课程标签搜索" maxlength="10" style="width: 200px;"
                class="filter-item" @keyup.enter.native="init"/>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="init">搜索</el-button>
      <el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="addForm">新增
      </el-button>
      <el-button
        :disabled="data.length === 0 || $refs.table.selection.length === 0 || $refs.table.selection.length > 1"
        class="filter-item"
        size="mini"
        type="success"
        icon="el-icon-edit-outline"
        @click="edit($refs.table.selection[0])">编辑
      </el-button>
      <el-button
        :loading="delAllLoading"
        :disabled="data.length === 0 || $refs.table.selection.length === 0"
        class="filter-item"
        size="mini"
        type="danger"
        icon="el-icon-delete"
        @click="openDel($refs.table.selection[0])">删除
      </el-button>
    </div>
    <el-table ref="table" v-loading="loading" :data="data" size="small" style="width: 100%;" border>
      <el-table-column type="selection"  align="center" width="55"/>
      <el-table-column prop="courseName" label="课程名称" align="center"/>
      <!-- <el-table-column prop="typeName" label="所属专业" align="center"  width="200"/> -->
      <el-table-column label="课程封面" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="imageHandle(scope.row.themeImage)">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
       <el-table-column prop="courseDesc" label="课程内容" align="center"/>
      <el-table-column prop="source" label="课程标签" align="center"/>

      <!-- <el-table-column prop="classHour" label="课件学时(分钟)" align="center">
        <template slot-scope="scope">
          <span>{{formatSeconds(scope.row.classHour)}}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="课程状态" align="center">
        <template slot-scope="scope">
          <div v-for="item in dicts" :key="item.value">
            <el-tag v-if="scope.row.status === item.value-0" :type="scope.row.status ? '' : 'info'">{{ item.label }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.create_time) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="teacherName" label="课程讲师" align="center"/> -->

<!--      <el-table-column prop="planName" label="关联培训计划" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.planId==null || scope.row.planId=='' ">无</span>
          <span v-else>{{scope.row.planName}}</span>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>
</template>

<script>
  import { del } from '@/api/business/course'
  import initData from '@/mixins/initData'
  import { tree } from '@/api/business/chapter'
  import { findUser } from '@/api/business/user'
  import { typeTree } from '@/api/business/courseType'
  import { getPlanList } from '@/api/business/trainPlan'
  import { formatSeconds,parseTime } from '@/utils/index'

  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import initDict from '@/mixins/initDict'

  export default {
    components: { Treeselect },
    name: 'index',
    mixins: [initData,initDict],
    data() {
      return {
        delAllLoading: false,
        style: 'width: 200px;height:31px',
        teacher: 'r_teacher',
        query: {
          value: ''
        },
        courseType: [],
        chapter: [],
        teacherList: [],
        planList: []
      }
    },
    created() {

      this.$nextTick(() => {
        this.init()
        this.getDict('course_status')
        this.getChapter()
        //this.getCourseType()
        //this.getTeacher()
        //this.getPlan()
      })
    },
    methods: {
      formatSeconds,
      parseTime,
      beforeInit() {
        this.url = 'course/page-course-list'
        this.params = { page: this.page, size: this.size }
        this.params.courseName = this.query.courseName
        this.params.source = this.query.source
        // this.params.typeId = this.query.typeId
        // this.params.teacherId = this.query.teacherId
        // this.params.planId = this.query.planId
        return true
      },
      addForm() {
        this.$router.push({ path: '/home/courseAdd' })
      },
      edit(row) {
        this.$router.push({
          path: '/home/courseAdd',
          query: { id: row.id }
        })
      },
      openDel(row) {
        this.$confirm('你确定删除选中的数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doDelete(row)
        })
      },
      doDelete(row) {
        this.delAllLoading = true
        del(row.id).then(res => {
          this.delAllLoading = false
          this.init()
          this.$notify({
            title: '删除成功',
            type: 'success',
            duration: 2500
          })
        }).catch(err => {
          this.delAllLoading = false
        })
      },
      imageHandle(row) {
        if(row!=null && row!=''){
          let rowObj = JSON.parse(row)
          return rowObj[0].url
        }

      },
      getChapter() {
        tree().then(data => {
          this.chapter = data
        })
      },
      getCourseType() {
        typeTree().then(data => {
          this.courseType = data
        })
      },
      getPlan() {
        getPlanList().then(data => {
          this.planList = data
        })
      },
      getTeacher() {
        findUser(this.teacher).then(data => {
          this.teacherList = data
        })
      }
    }
  }
</script>

<style scoped>
  .treeselect-main {
      margin-top: 1px;
      line-height: 28px;
      width: 200px;
      .vue-treeselect__placeholder {
        line-height: 28px;
      }
      .vue-treeselect__control {
        height: 28px;
      }
    }
</style>
